<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul {
      list-style: none
    }
    
    * {
      margin: 0;
      padding: 0;
    }
    
    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }
    
    div li {
      width: 240px;
      height: 400px;
      float: left;
    }
    
    div ul {
      width: 1300px;
    }
  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script>
  //1 获取元素
  var box = document.getElementById("box");
  var list = box.children[0];
  var lis = list.children;//获取要操作的子元素li
  
  //2 遍历lis
  for (var i = 0; i < lis.length; i++) {
    lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
    lis[i].onmouseover=function(){
      for(var i =0;i<lis.length;i++){
        animate(lis[i],"width",100)
      }
      animate(this,"width",800)
    }
    lis[i].onmouseout=function(){
      for(var i = 0;i < lis.length;i++){
        animate(lis[i],"width",240)
      }
    }
  }
  function animate(tag, attr, target) {
    clearInterval(tag.timer);
    tag.timer = setInterval(function () {
      var leader = parseInt(getStyle(tag, attr)) || 0;
      
      var step = (target - leader) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      leader = leader + step;
      
      //-- 设置位置也需要修改为设置指定样式
      tag.style[attr] = leader + "px";
      
      if (leader == target) {
        clearInterval(tag.timer);
      }
    }, 17);
  }
  
  //获取任意样式值的函数
  function getStyle(tag, attr) {
    if (tag.currentStyle) {
      return tag.currentStyle[attr];
    } else {
      return getComputedStyle(tag, null)[attr];
    }
  }
</script>
</body>
</html>
